<template>
	<view class="page">
		<nav-header title="我的邀请人" :showRight="false">
			<template v-slot:left>
				<view v-if="from" @tap="goChat">
					<svg-icon icon="arrowLeft"></svg-icon>
				</view>
				<view v-else @tap="goBack">
					<svg-icon icon="arrowLeft"></svg-icon>
				</view>
			</template>
		</nav-header>
		<view class="unknown" v-if="!myShareUser">
			<view class="form">
				<uni-forms ref="form" :modelValue="form" :rules="rules">
					<uni-forms-item name="shareCode">
						<uni-easyinput type="text" v-model="form.shareCode" placeholder="请输入邀请码" :clearable="true"
							:inputBorder="false" />
					</uni-forms-item>
				</uni-forms>
				<view class="tip">
					<text class="text-xs-Regular">没有邀请人，请先设置</text>
				</view>
			</view>
			<view class="commit">
				<view class="button-style">
					<button class="btncolor" @click="submitForm()">
						<text class="text-md-Medium" style="color: #fff;">保存</text>
					</button>
				</view>
			</view>
		</view>
		<view class="share-user-panel" v-else>
			<view class="content">
				<head-image :name="myShareUser.nickName" :url="myShareUser.headImageThumb" :size="100"
					@click="onShowFullImage()"></head-image>

				<view class="info-item">
					<view class="info-primary">
						<text class="info-username text-md-Medium">
							{{ myShareUser.nickName }}
						</text>
						<view class="info-sex">
							<view v-if="myShareUser.sex == 0" class="fc">
								<view class="icon">
									<svg-icon icon="sex" :width="32"></svg-icon>
								</view>
								<text class="text-sm-Regular">男</text>
							</view>
							<view v-if="myShareUser.sex == 1" class="fc">
								<view class="icon">
									<svg-icon icon="woman" :width="32"></svg-icon>
								</view>
								<text class="text-sm-Regular">女</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="container">
				<view>
					<text class="text-sm-Regular title">用户名：</text>
					<text class="text-sm-Regular">{{ myShareUser.userName }}</text>
				</view>
				<view class="userId">
					<view>
						<text class="text-sm-Regular title">友号：</text>
						<text class="text-sm-Regular">{{ myShareUser.userFriendId }}</text>
					</view>
					<text class="divider">|</text>
					<view>
						<text class="text-sm-Regular title">商号：</text>
						<text class="text-sm-Regular">{{ myShareUser.userBusinessId }}</text>
					</view>
				</view>
				<view v-if="myShareUser.hometown">
					<text class="text-sm-Regular title">故乡：</text>
					<text class="text-sm-Regular">{{ hometownReplace }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myShareUser: null,
				form: {
					shareCode: null
				},
				rules: {
					shareCode: {
						rules: [{
							required: true,
							errorMessage: '请输入邀请码',
						}],
					}
				},
				from:null
			}
		},
		methods: {
			submitForm() {
				console.log(this.form.shareCode,1)
				if(this.form.shareCode == null || this.form.shareCode == ""){
					uni.showToast({
						title:"邀请码不能为空",
						icon:"error"
					})
					return;
				}
				this.$refs.form.validate().then(res => {
					this.$http({
						url: "/share/save",
						method: "POST",
						data: {
							shareCode: res.shareCode,
						}
					}).then(res => {
						this.getData()
					})
				})
			},
			getData() {
				this.$http({
					url: "/share/myShareUser",
					method: 'GET',
				}).then(res => {
					this.myShareUser = res
				})
			},
			goChat() {
				uni.switchTab({
					url: "/pages/tabbar/chat"
				})
			},
			goBack() {
				uni.navigateBack()
			}
		},
		computed: {
			hometownReplace() {
				const formattedAddress = this.myShareUser.hometown.replace(/省|市|区|镇|街道|村|社区|委员会/g, '$&-');
				return formattedAddress.replace(/-$/, '');
			}
		},
		onLoad(options) {
			console.log(options);
			this.from=options.from
			this.$set(this.form, 'shareCode', options.shareCode || null)
			if (options.shareCode) {
				this.configStore.showSharePanel(options.shareCode)
			}
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: white;
		// height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24rpx;
		padding: 24rpx 30rpx;
		font-size: 27rpx;

		.info-item {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			// padding-left: 40rpx;
			// padding-top: 40rpx;
			flex: 1;

			.info-primary {
				display: flex;
				flex-direction: column;
				// align-items: center;
				gap: 12px;

				.info-username {
					font-size: 36rpx;
					font-weight: 600;
				}

				.info-sex {
					display: flex;
					align-items: center;

					.fc {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					text {
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.container {
		padding: 24rpx 32rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		gap: 16rpx;
		color: $gray-600;

		.title {
			color: $gray-400;
		}

		.divider {
			font-size: 20rpx;
			color: $gray-200;
		}

		.userId {
			display: flex;
			align-items: center;
			gap: 16rpx;
		}
	}

	.person-signature {
		padding: 24rpx 32rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		gap: 16rpx;
		color: $gray-600;

		.title {
			color: $gray-400;
		}
	}

	.form {
		display: flex;
		flex-direction: column;
		padding: 24rpx 32rpx;
		gap: 24rpx;

		:deep(.uni-forms) {
			height: 88rpx;
		}

		:deep(.uni-easyinput__content) {
			background-color: $gray-100 !important;

			.uni-easyinput__content-input {
				height: 40rpx;
				padding: 24rpx 32rpx;
				background-color: $gray-100;
			}

			.uniui-clear {
				background-color: $gray-100;
			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.tip {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// font-size: 25rpx;
			color: $gray-400;
		}
	}

	.commit {
		width: 100%;
		position: fixed;
		bottom: 42rpx;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.button-style {
			padding: 24rpx 32rpx;
			width: 100%;
		}

		.btncolor {
			width: 100%;
			background-color: $brand-500;
			color: $white;
			border-radius: 34rpx;
			padding: 8rpx 24rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>